<template>
	<app-page>
		<wd-config-provider :theme="theme">
			<view class="container">
				<view class="head card">
					<view class="avatar">
						<image :src="lawyer.head"></image>
					</view>
					<view class="name">
						{{ lawyer.realname }}
					</view>
					<view class="btn">
						<wd-button size="small" open-type="share">
							<wd-icon name="share"></wd-icon> 分享律师
						</wd-button>
					</view>
				</view>
				<view class="card">
					<view class="title">简介</view>
					<view class="value">
						<!-- {{ lawyer.introduct }} -->
						<mp-html :tag-style="tagStyle" :content="lawyer.introduct" />
					</view>
				</view>
				<view class="card">
					<view class="title">描述</view>
					<view class="value">
						<!-- {{ lawyer.desc }} -->
						<mp-html :tag-style="tagStyle" :content="lawyer.desc" />
					</view>
				</view>

				<view class="footer">
					<wd-button @click="goPage">
						咨询律师
					</wd-button>
				</view>
			</view>
		</wd-config-provider>
	</app-page>
</template>

<script lang="ts">
	import { defineComponent, ref } from 'vue';

	import { onPageScroll, onLoad } from '@dcloudio/uni-app';
	import { useImStore } from '@/store';
	import { getProfileById } from "@/api/common"
	import useRouter from '@/hooks/useRouter';

	export default defineComponent({
		name: '',
		components: {},
		setup(props, ctx) {
			// 日间light、夜间dark主题
			const theme = ref('light');
			const imStore = useImStore();
			const router = useRouter();
			const tagStyle = {
				p: 'word-wrap: break-word;word-break: break-all;'
			}
			const lawyer : any = ref({
				head: "",
				realname: "",
				introduct: "",
				desc: "",
				id: "",
			}); // 律师ID，根据实际情况进行赋值操作，例如：lawyer.value = '123456'
			const goPage = () => {
				// 1 免费
				// 2 通话
				// 3 图文 = 专家
				imStore.doIm(3, lawyer.value.uid)
				// router.push({
				// 	url: "/im/consult/consult",
				// 	params: {
				// 		lawyer: lawyer.value.uid
				// 	}, // 传递参数，例如搜索条件等。
				// })
			};
			onLoad((params) => {
				if (params.lawyer) {
					getProfileById({
						user_id: params.lawyer
					}).then(res => {
						lawyer.value = res;
					});
				}
			})
			return {
				theme,
				lawyer,
				goPage,
				tagStyle
			};
		}
	});
</script>
<!-- #ifdef MP-WEIXIN -->
<style lang="less">
	page {
		background-color: #f2f2f2;
	}
</style>
<!-- #endif -->
<style lang="less" scoped>
	page {
		background-color: #f2f2f2;
	}

	.container {
		padding: 24rpx;
		padding-bottom: 200rpx;

		.card {
			padding: 12rpx;
			width: calc(100% - 24rpx - 24rpx);
			margin-bottom: 24rpx;

			.title {
				font-size: 32rpx;
				padding-bottom: 12rpx;
				text-align: center;
				font-weight: bold;
				border-bottom: 1rpx solid #e6e6e6;
			}

			.value {
				padding: 12rpx 0 0 0;
				font-size: 32rpx;

				p {
					word-wrap: break-word;
					word-break: break-all;
				}
			}
		}

		.head {
			display: flex;
			align-items: center;
			flex-wrap: wrap;

			.avatar {
				min-width: 140rpx;
				width: 140rpx;
				height: 140rpx;
				border-radius: 50rpx;
				overflow: hidden;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.name {
				width: calc(100% - 140rpx - 20rpx - 220rpx);
				margin-left: 20rpx;
				font-weight: bold;
			}

			.btn {
				width: 220rpx;

				:deep(.wd-button) {
					width: 100% !important; // 覆盖默认的宽度限制
					background: #c91c1f !important;
				}
			}
		}

		.footer {
			position: fixed;
			bottom: 120rpx;
			width: calc(100% - 24rpx - 24rpx);

			:deep(.wd-button) {
				width: 100% !important; // 覆盖默认的宽度限制
				background: #c91c1f !important;
			}
		}
	}
</style>